<template>
  <div class="bar-chart">
    <div ref="barChart" id="container"></div>
    <div class="loading" v-if="isLoading" v-loading="isLoading"></div>
  </div>
</template>

<script setup>
import { Column, G2 } from '@antv/g2plot'
import { onMounted, watch, ref } from 'vue'
import { useKnowledgeStore } from '@/stores/knowledge-store'

const props = defineProps({
  knowledgeInfo: Object,
  rateArray: Array,
  studentSituationValue: String,
  isLoading: Boolean
})

const knowledgeStore = useKnowledgeStore()

const barPlot = ref(null)

const getChartOptions = () => {
  console.log(props.rateArray)

  const studentNums = props.rateArray.map(item => item.students.length)
  console.log(studentNums)

  const max = Math.max(...studentNums)
  console.log(max)

  return {
    data: props.rateArray,
    useDeferredLabel: 500,
    appendPadding: 15,
    autoFit: true,
    xField: 'field',
    yField: 'count',
    columnStyle: {
      fill: 'l(270) 0:#67C6FF 1:#428FFF',
      radius: [3, 3, 0, 0]
    },
    label: {
      position: 'middle'
    },
    yAxis: {
      max: max * 1.3
    },
    meta: {
      count: {
        alias: '人数'
      },
      correctPercent: {}
    },
    brush: {
      enabled: true,
      mask: {
        style: {
          fill: 'rgba(0, 0, 0, .2)'
        }
      },
      button: {
        text: '重置'
      }
    },
    annotations: [
      {
        id: 'region-annotation',
        type: 'region',
        style: {
          fill: '#f5222d'
        },
        start: () => ['0%', '0%'],
        end: () => [props.knowledgeInfo?.rate + '%', '100%']
      }
    ]
  }
}

const updateChart = () => {
  if (!barPlot.value) return
  const options = getChartOptions()
  barPlot.value.update(options)
}

onMounted(() => {
  const options = getChartOptions()
  barPlot.value = new Column('container', options)
  // 选中学生
  barPlot.value.on(G2.BRUSH_FILTER_EVENTS.AFTER_FILTER, () => {
    const filteredData = barPlot.value.chart.getData()
    const { setSelectedStudent } = knowledgeStore
    console.log(filteredData)
    const selectedStudent = []
    filteredData.forEach(item => {
      selectedStudent.push(...item.students)
    })
    setSelectedStudent(selectedStudent)
  })
  // 重置时清空选中的学生
  barPlot.value.on(G2.BRUSH_FILTER_EVENTS.AFTER_RESET, () => {
    const { setSelectedStudent } = knowledgeStore
    setSelectedStudent([])
  })
  barPlot.value.render()
})

watch(
  () => knowledgeStore.selectedStudent,
  newValue => {
    if (newValue.length === 0 && barPlot.value) {
      // 重置刷选
      barPlot.value.chart.getComponents().forEach(co => {
        if (co.type === 'brush') {
          co.component.clear()
        }
      })
      // 更新图表
      barPlot.value.render()
    }
  }
)

watch(
  () => props.rateArray,
  () => {
    updateChart()
  }
)
</script>

<style lang="less" scoped>
.bar-chart {
  position: relative;
  width: 100%;
  height: 150px;
  .loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    :deep(.el-loading-spinner) {
      transform: translateY(-50%);
    }
  }
  #container {
    width: 100%;
    height: 100%;
  }
}
</style>
